<template>
    <div class="count-item" 
    :style="{'--backgroundColor' : backgroundColor || 'lightseagreen', '--spanColor' : spanColor || '#0f0', '--color' : color || '#fff'}">
        <div class="title">{{ item.title }}</div>
        <count-to
        :start-val="0"
        :end-val="item.count"
        :duration="2000"
        />
    </div>
</template>

<script>
import countTo from 'vue-count-to';
export default {
    props : {
        backgroundColor : {
            default : ''
        },
        spanColor : {
            default : ''
        },
        color : {
            default : ''
        },
        item : {
            default : {}
        }
    },
    components : {
        countTo
    },
}
</script>

<style lang="scss" scoped>
@media screen and (max-width: 1000px) {
    .count-item{
        margin: 5px;
        line-height: 30px;
        width: calc(50% - 20px);
        height: 80px;
    }
}
@media screen and (min-width: 1000px) {
    .count-item{
        line-height: 40px;
        margin: 10px 4%;
        width: 220px;
        height: 120px;
    }
}
.count-item{
    padding: 20px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    flex-direction: column;
    background-color: var(--backgroundColor);
    color: #fff;
    box-shadow: 0 2px 12px 0 var(--backgroundColor);
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.5s;
    &:hover{
        box-shadow: 0 6px 36px 0 var(--backgroundColor);
    }
    .title{
        font-size: calc(10px + 0.4vw);
    }
    span{
        font-size: calc(15px + 0.5vw);
        color: var(--spanColor);
    }
}
</style>